<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>精简jquery</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}


.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:bold}.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-tag .hljs-attr{color:#008080}.hljs-string,.hljs-doctag{color:#d14}.hljs-title,.hljs-section,.hljs-selector-id{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-type,.hljs-class .hljs-title{color:#458;font-weight:bold}.hljs-tag,.hljs-name,.hljs-attribute{color:#000080;font-weight:normal}.hljs-regexp,.hljs-link{color:#009926}.hljs-symbol,.hljs-bullet{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

/* CSS Document */
body{
	font-family: "微软雅黑" ,Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
code.javascript{
	background: #fff;
}
.red {
	color: red;
}
.title {
	font-weight: bold;
	font-size: 16px;
	line-height: 2;
}
.btn-success {
	margin: 5px 0;
}
a img {
	width: 200px;
}
pre {
	background-color: #fff;
}
input:hover {
	border-color: rgba(76,195,165,1.00);
}
input {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	border-color: #4cae4c;
}
iframe{width:100%;height:800px; }
@media screen and (min-device-width:1600px){
	iframe{width:1600px;margin:0 -200px}
}
</style>

<script type="text/javascript" src="https://github.ma863.com/qqtxt/jetee/master/dist/1.0.1/jquery/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>
</head>

<body>
<div class="jumbotron">
	<div class="container">
		<h1>Jetee</h1>
		<h2 class="text-right"><a href="https://github.com/qqtxt/jetee">https://github.com/qqtxt/jetee</a></h2>
		<p style="text-indent:2em;"> 之精简jquery，支持类似JQuery语法的常用DOM操作和网络请求功能。它不到4K大小，适合应用于存储空间极其有限的场景。</p>
		<p style="text-indent:2em;"> 常见js库精简，功能尽量做到可替换，可用grunt选择想要的库打包到一个文件 或是分库打包，方便替换 </p>
		<p>
		<h3> 下载: </h3>
		<a class="btn btn-danger btn-lg" href="https://raw.githubusercontent.com/qqtxt/jetee/master/dist/1.0.1/jquery/jquery.js" role="button">jquery.js</a>
		<a class="btn btn-danger btn-lg" href="https://raw.githubusercontent.com/qqtxt/jetee/master/dist/1.0.1/jquery/jquery.min.js" role="button">jquery.min.js</a>
		</p>
		<p style="background: wheat;padding: 10px 5px;font-size: 16px;"><b>或直接引用：</b><br/>
			&lt;script type="text/javascript" src="https://xxx.com/dist/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;</p>
	</div>
</div>
<div class="container">
	<style>
			.pro_name a{color: #4183c4;}
			.osc_git_title{background-color: #fff;}
			.osc_git_box{background-color: #fff;}
			.osc_git_box{border-color: #E3E9ED;}
			.osc_git_info{color: #666;}
			.osc_git_main a{color: #9B9B9B;}
			</style>
	<h2>关于</h2>
	<div class="list-group">
		<li class="list-group-item"> 借鉴 Leytton、LZQ写的SimJQ </li>
		<li class="list-group-item"> License：MIT </li>
		<li class="list-group-item">

		 Blog：<a href="http://www.ma863.com" target="_blank">www.ma863.com</a>
		</li>
	</div>
	<h2>未列出函数说明</h2>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>函数名</th>
				<th>说明</th>
				<th>示例</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td> 原则 </td>
				<td> 存在多个返回值则返回数组，只有一个值则直接返回 </td>
				<td>$('#id').text()、$('.class').eq(0).text()返回一个值</td>
			</tr>
			<tr>
				<td> eq </td>
				<td> 获取第i个元素 </td>
				<td>$('.class').eq(i)</td>
			</tr>
			<tr>
				<td> first </td>
				<td> 获取第一个元素 </td>
				<td>$('.class').first()</td>
			</tr>
			<tr>
				<td> last </td>
				<td> 获取最后一个元素 </td>
				<td>$('.class').last()</td>
			</tr>
			<tr>
				<td> find </td>
				<td> 用于元素查找,支持id,class,标签等选择器 </td>
				<td>$('.class').find('.class').find('a')</td>
			</tr>
			<tr>
				<td> removeAttr </td>
				<td> 删除属性值 </td>
				<td>$('.class').removeAttr('class')</td>
			</tr>
			<tr>
				<td> css </td>
				<td> 设置/获取css样式 </td>
				<td>$('.class').css('color'[,'red']);</td>
			</tr>
		</tbody>
	</table>
	<div></div>
<iframe src="http://123.cc/onlineEdit.php"></iframe>


	<h2>示例</h2>
	<div id="eg1" class="title">eg1:文本修改/获取</div>
	<div>
		<div id="test1">test1,精简jquery~</div>
		<input type="button" class="btn btn-success" value="修改/获取" onclick="test1();" />
		<pre><code class="javascript">$('#test1').text('Hello,I\'m Leytton~');
alert($('#test1').text());</code></pre>
	</div>
	<hr/>
	<div id="eg2" class="title">eg2:属性修改/获取 </div>
	<div>
		<div id="test2">test2,精简jquery~</div>
		<input type="button" class="btn btn-success" value="修改/获取" onclick="test2();" />
		<pre><code class="javascript">$('#test2').attr('my_name', '不亦');
alert($('#test2').attr('my_name'));</code></pre>
	</div>
	<hr/>
	<div id="eg3" class="title">eg3:Html修改/获取 </div>
	<div>
		<div id="test3">test3,精简jquery~</div>
		<input type="button" class="btn btn-success" value="Html修改/获取" onclick="test3();" />
		<pre><code class="javascript">$('#test3').html('&lt;a href="http://blog.csdn.net/leytton" target="_blank"&gt;&lt;img src="img/sa.jpg" /&gt;&lt;/a&lt;');
alert($('#test3').html());</code></pre>
	</div>
	<hr/>
	<div id="eg4" class="title">eg4:隐藏/显示 </div>
	<div>
		<div id="test4" show="1">test4,精简jquery~</div>
		<input type="button" class="btn btn-success" value="隐藏/显示" onclick="test4();" />
		<pre><code class="javascript">if('1' == $('#test4').attr('show')) {
	$('#test4').hide();
	$('#test4').attr('show', '0');
} else {
	$('#test4').show();
	$('#test4').attr('show', '1');
}</code></pre>
	</div>
	<hr/>
	<div id="eg5" class="title">eg5:获取输入值 </div>
	<div>
		<input id="test5" type="text" />
		<input type="button" class="btn btn-success" value="获取输入值" onclick="test5();" />
		<pre><code class="javascript">alert($('#test5').val());</code></pre>
	</div>
	<hr/>
	<div id="eg6" class="title">eg6:设置输入值 </div>
	<div>
		<input id="test6" type="text" />
		<input type="button" class="btn btn-success" value="设置输入值" onclick="test6();" />
		<pre><code class="javascript">$('#test6').val('Hello,精简jquery~');</code></pre>
	</div>
	<hr/>
	<div id="eg7" class="title">eg7:多选择器修改/获取第i个文本 </div>
	<div id="demo7" class="demo">
		<div class="test7">test7,精简jquery1~</div>
		<div class="test7">test7,精简jquery2~</div>
		<div class="test7">test7,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取文本" onclick="test7();" />
		<pre><code class="javascript">$('.test7').eq(0).text('Hi,精简jquery~');
alert($('.test7').eq(0).text());</code></pre>
	</div>
	<hr/>
	<div id="eg8" class="title">eg8:多选择器修改/获取多个文本 </div>
	<div id="demo8" class="demo">
		<div class="test8">test8,精简jquery1~</div>
		<div class="test8">test8,精简jquery2~</div>
		<div class="test8">test8,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取文本" onclick="test8();" />
		<pre><code class="javascript">$('.test8').eq(1,2).text('Hi,精简jquery~');
alert($('.test8').eq(1,2).text());</code></pre>
	</div>
	<hr/>
	<div id="eg9" class="title">eg9:多选择器默认修改/获取所有文本 </div>
	<div>
		<div class="test9">test9,精简jquery1~</div>
		<div class="test9">test9,精简jquery2~</div>
		<div class="test9">test9,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取所有文本" onclick="test9();" />
		<pre><code class="javascript">$('.test9').text('Hi,精简jquery~');
var	str='';
str_list=$('.test9').text();
for(var i=0;i&lt;str_list.length;i++){
	str+=(i+':'+str_list[i]+'\n');
}
alert('length:'+str_list.length+'\n'+str);</code></pre>
	</div>
	<hr/>
	<div id="eg10" class="title">eg10:多选择器修改/获取第i个属性 </div>
	<div>
		<div class="test10">test10,精简jquery1~</div>
		<div class="test10">test10,精简jquery2~</div>
		<div class="test10">test10,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取属性" onclick="test10();" />
		<pre><code class="javascript">$('.test10').eq(0).attr('my_name', '不亦');
alert($('.test10').eq(0).attr('my_name'));</code></pre>
	</div>
	<hr/>
	<div id="eg11" class="title">eg11:多选择器修改/获取多个属性 </div>
	<div>
		<div class="test11">test11,精简jquery1~</div>
		<div class="test11">test11,精简jquery2~</div>
		<div class="test11">test11,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取属性" onclick="test11();" />
		<pre><code class="javascript">$('.test11').eq(1,2).attr('my_name', '不亦');
alert($('.test11').eq(1,2).attr('my_name'));</code></pre>
	</div>
	<hr/>
	<div id="eg12" class="title">eg12:多选择器修改/获取所有属性 </div>
	<div>
		<div class="test12">test12,精简jquery1~</div>
		<div class="test12">test12,精简jquery2~</div>
		<div class="test12">test12,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取所有属性" onclick="test12();" />
		<pre><code class="javascript">$('.test12').attr('my_name','不亦');
var	str='';
str_list=$('.test12').attr('my_name');
for(var i=0;i&lt;str_list.length;i++){
	str+=(i+':'+str_list[i]+'\n');
}
alert('length:'+str_list.length+'\n'+str);</code></pre>
	</div>
	<hr/>
	<div id="eg13" class="title">eg13:多选择器修改/获取第i个Html </div>
	<div>
		<div class="test13">test13,精简jquery1~</div>
		<div class="test13">test13,精简jquery2~</div>
		<div class="test13">test13,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取Html" onclick="test13();" />
		<pre><code class="javascript">$('.test13').eq(0).html('&lt;a href="http://blog.csdn.net/leytton" target="_blank"&gt;&lt;img src="img/sa.jpg" /&gt;&lt;/a&lt;');
alert($('.test13').eq(0).html());</code></pre>
	</div>
	<hr/>
	<div id="eg14" class="title">eg14:多选择器修改/获取多个Html </div>
	<div>
		<div class="test14">test13,精简jquery1~</div>
		<div class="test14">test8,精简jquery2~</div>
		<div class="test14">test8,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取Html" onclick="test14();" />
		<pre><code class="javascript">$('.test14').eq(1,2).html('&lt;a href="http://blog.csdn.net/leytton" target="_blank"&gt;&lt;img src="img/sa.jpg" /&gt;&lt;/a&lt;);
alert($('.test14').eq(1,2).html());</code></pre>
	</div>
	<hr/>
	<div id="eg15" class="title">eg15:多选择器默认修改/获取所有Html </div>
	<div>
		<div class="test15">test15,精简jquery1~</div>
		<div class="test15">test15,精简jquery2~</div>
		<div class="test15">test15,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="修改/获取所有Html" onclick="test15();" />
		<pre><code class="javascript">$('.test15').html('&lt;a href="http://blog.csdn.net/leytton" target="_blank"&gt;&lt;img src="img/sa.jpg" /&gt;&lt;/a&lt;');
var	str='';
str_list=$('.test15').html();
for(var i=0;i&lt;str_list.length;i++){
	str+=(i+':'+str_list[i]+'\n');
}
alert('length:'+str_list.length+'\n'+str);</code></pre>
	</div>
	<hr/>
	<div id="eg16" class="title">eg16:多选择器隐藏/显示第i个元素 </div>
	<div>
		<div class="test16">test16,精简jquery1~</div>
		<div class="test16">test16,精简jquery2~</div>
		<div class="test16">test16,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="隐藏/显示" onclick="test16();" />
		<pre><code class="javascript">if('0'==$('#eg16').attr('show')){
	$('.test16').eq(0).show();
	$('#eg16').attr('show','1');
}else{
	$('.test16').eq(0).hide();
	$('#eg16').attr('show','0');
}</code></pre>
	</div>
	<hr/>
	<div id="eg17" class="title">eg17:多选择器隐藏/显示第i个元素 </div>
	<div>
		<div class="test17">test17,精简jquery1~</div>
		<div class="test17">test17,精简jquery2~</div>
		<div class="test17">test17,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="隐藏/显示" onclick="test17();" />
		<pre><code class="javascript">if('0'==$('#eg17').attr('show')){
	$('.test17').eq(1,2).show();
	$('#eg17').attr('show','1');
}else{
	$('.test17').eq(1,2).hide();
	$('#eg17').attr('show','0');
}</code></pre>
	</div>
	<hr/>
	<div class="title">eg18:多选择器默认隐藏/显示所有元素</div>
	<div id="eg18">
		<div class="test18">test18,精简jquery1~</div>
		<div class="test18">test18,精简jquery2~</div>
		<div class="test18">test18,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="隐藏/显示" onclick="test18();" />
		<pre><code class="javascript">if('0'==$('#eg18').attr('show')){
	$('.test18').show();
	$('#eg18').attr('show','1');
}else{
	$('.test18').hide();
	$('#eg18').attr('show','0');
}</code></pre>
	</div>
	<hr/>
	<div id="eg19" class="title">eg19:单选择器获取元素对象 </div>
	<div>
		<div id="test19">test19,精简jquery~</div>
		<input type="button" class="btn btn-success" value="获取元素对象" onclick="test19();" />
		<pre><code class="javascript">alert('元素对象:'+$('#test19')[0]+'\n文本:'+$('#test19')[0].innerText);</code></pre>
	</div>
	<hr/>
	<div id="eg20" class="title">eg20:多选择器获取第1个元素对象 </div>
	<div>
		<div class="test20">test20,精简jquery1~</div>
		<div class="test20">test20,精简jquery2~</div>
		<div class="test20">test20,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="获取元素对象" onclick="test20();" />
		<pre><code class="javascript">alert('元素对象:'+$('.test20')[0]+'\n文本:'+$('.test20')[0].innerText);</code></pre>
	</div>
	<hr/>
	<div id="eg21" class="title">eg21:多选择器获取第i个元素对象 </div>
	<div>
		<div class="test21">test21,精简jquery1~</div>
		<div class="test21">test21,精简jquery2~</div>
		<div class="test21">test21,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="获取元素对象" onclick="test21();" />
		<pre><code class="javascript">alert('元素对象:'+$('.test21')[1]+'\n文本:'+$('.test21')[1].innerText);</code></pre>
	</div>
	<hr/>
	<div id="eg22" class="title">eg22:多选择器获取所有元素对象 </div>
	<div>
		<div class="test22">test22,精简jquery1~</div>
		<div class="test22">test22,精简jquery2~</div>
		<div class="test22">test22,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="获取所有元素对象" onclick="test22();" />
		<pre><code class="javascript">var	str='';
for(var i=0;i&lt;$('.test22').length;i++){
	str+=(i+':'+$('.test22')[i].innerText+'\n');
}
alert('元素对象数组:'+$('.test22')+'\n'+str);</code></pre>
	</div>
	<hr/>
	<div id="eg23" class="title">eg23:多选择器修改/获取第i个输入框的值 </div>
	<div>
		<input class="test23" value="test23,精简jquery1~" />
		<input class="test23" value="test23,精简jquery2~" />
		<input class="test23" value="test23,精简jquery3~" />
		<input type="button" class="btn btn-success" value="修改/获取输入值" onclick="test23();" />
		<pre><code class="javascript">$('.test23').eq(0).val('Hi,精简jquery~');
alert($('.test23').eq(0).val());</code></pre>
	</div>
	<hr/>
	<div id="eg24" class="title">eg24:多选择器修改/获取多个输入框的值 </div>
	<div>
		<input class="test24" value="test24,精简jquery1~" />
		<input class="test24" value="test24,精简jquery2~" />
		<input class="test24" value="test24,精简jquery3~" />
		<input type="button" class="btn btn-success" value="修改/获取输入值" onclick="test24();" />
		<pre><code class="javascript">$('.test24').eq(1,2).val('Hi,精简jquery~');
alert($('.test24').eq(1,2).val());</code></pre>
	</div>
	<hr/>
	<div id="eg25" class="title">eg25:多选择器默认修改/获取所有输入框的值 </div>
	<div>
		<input class="test25" value="test25,精简jquery1~" />
		<input class="test25" value="test25,精简jquery2~" />
		<input class="test25" value="test25,精简jquery3~" />
		<input type="button" class="btn btn-success" value="修改/获取所有输入值" onclick="test25();" />
		<pre><code class="javascript">$('.test25').val('Hi,精简jquery~');
var	str='';
str_list=$('.test25').val();
for(var i=0;i&lt;str_list.length;i++){
	str+=(i+':'+str_list[i]+'\n');
}
alert('length:'+str_list.length+'\n'+str);</code></pre>
	</div>
	<hr/>
	<div id="eg26" class="title">eg26:单选择器实现click点击事件 </div>
	<div>
		<div id="test26">test26,精简jquery~(点击)</div>
		<pre><code class="javascript">$('#test26').click(function() {
	alert(this.innerText);
});</code></pre>
	</div>
	<hr/>
	<div id="eg27" class="title">eg27:多选择器实现第i个元素的click点击事件 </div>
	<div>
		<div class="test27">test27,精简jquery1~(点击)</div>
		<div class="test27">test27,精简jquery2~</div>
		<div class="test27">test27,精简jquery3~</div>
		<pre><code class="javascript">$('.test27').eq(0).click(function() {
	alert(this.innerText);
});</code></pre>
	</div>
	<hr/>
	<div id="eg28" class="title">eg28:多选择器实现多个元素的click点击事件 </div>
	<div>
		<div class="test28">test28,精简jquery1~</div>
		<div class="test28">test28,精简jquery2~(点击)</div>
		<div class="test28">test28,精简jquery3~(点击)</div>
		<pre><code class="javascript">$('.test28').eq(1,2).click(function() {
	alert(this.innerText);
});</code></pre>
	</div>
	<hr/>
	<div id="eg29" class="title">eg29:多选择器默认实现所有元素的click点击事件 </div>
	<div>
		<div class="test29">test29,精简jquery1~(点击)</div>
		<div class="test29">test29,精简jquery2~(点击)</div>
		<div class="test29">test29,精简jquery3~(点击)</div>
		<pre><code class="javascript">$('.test29').click(function() {
	alert(this.innerText);
});</code></pre>
	</div>
	<hr/>
	<div id="eg30" class="title">eg30:each函数 </div>
	<div>
		<div class="test30">test30,精简jquery1~</div>
		<div class="test30">test30,精简jquery2~</div>
		<div class="test30">test30,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="each函数依次获取元素文本" onclick="test30();" />
		<pre><code class="javascript">var	str='';
var	i=0;
$('.test30').each(function(){
	str+=(i+':'+this.innerText+'\n');
	i++;
});
alert('length:'+i+'\n'+str);

//更简单的方式
$res=$('.test30').each(function(){
	return this.innerText;
});
alert($res);
返回的是字符串数据，如果没有参数1，则返回的是$()对象</code></pre>
	</div>
	<hr/>
	<div id="eg31" class="title">eg31:单选择器删除元素 </div>
	<div>
		<div id="test31">test31,精简jquery~</div>
		<input type="button" class="btn btn-success" value="删除元素" onclick="test31();" />
		<pre><code class="javascript">$('#test31').remove();</code></pre>
	</div>
	<hr/>
	<div id="eg32" class="title">eg32:多选择器删除第i个元素 </div>
	<div>
		<div class="test32">test32,精简jquery1~</div>
		<div class="test32">test32,精简jquery2~</div>
		<div class="test32">test32,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除元素" onclick="test32();" />
		<pre><code class="javascript">$('.test32').eq(0).remove();</code></pre>
	</div>
	<hr/>
	<div id="eg33" class="title">eg33:多选择器删除多个元素 </div>
	<div>
		<div class="test33">test33,精简jquery1~</div>
		<div class="test33">test33,精简jquery2~</div>
		<div class="test33">test33,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除元素" onclick="test33();" />
		<pre><code class="javascript">$('.test33').eq(1,2).remove();</code></pre>
	</div>
	<hr/>
	<div id="eg34" class="title">eg34:多选择器默认删除所有元素 </div>
	<div>
		<div class="test34">test34,精简jquery1~</div>
		<div class="test34">test34,精简jquery2~</div>
		<div class="test34">test34,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除元素" onclick="test34();" />
		<pre><code class="javascript">$('.test34').remove();</code></pre>
	</div>
	<hr/>
	<div id="eg35" class="title">eg35:单选择器在元素末尾插入内容(支持html) </div>
	<div>
		<div id="test35">test35,精简jquery~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test35();" />
		<pre><code class="javascript">$('#test35').append('hello');</code></pre>
	</div>
	<hr/>
	<div id="eg36" class="title">eg36:多选择器在第i个元素末尾插入html内容(支持html) </div>
	<div>
		<div class="test36">test36,精简jquery1~</div>
		<div class="test36">test36,精简jquery2~</div>
		<div class="test36">test36,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test36();" />
		<pre><code class="javascript">$('.test36').eq(0).append('&lt;a href="http://www.llqqww.com" target="_blank"&lt;www.llqqww.com&lt;/a&lt;');</code></pre>
	</div>
	<hr/>
	<div id="eg37" class="title">eg37:多选择器在多个元素末尾插入内容(支持html) </div>
	<div>
		<div class="test37">test37,精简jquery1~</div>
		<div class="test37">test37,精简jquery2~</div>
		<div class="test37">test37,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test37();" />
		<pre><code class="javascript">$('.test37').eq(1,2).append('hello');</code></pre>
	</div>
	<hr/>
	<div id="eg38" class="title">eg38:多选择器默认在所有元素末尾插入内容(支持html) </div>
	<div>
		<div class="test38">test38,精简jquery1~</div>
		<div class="test38">test38,精简jquery2~</div>
		<div class="test38">test38,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test38();" />
		<pre><code class="javascript">$('.test38').append('&lt;a href="http://www.llqqww.com" target="_blank"&lt;www.llqqww.com&lt;/a&lt;');</code></pre>
	</div>
	<hr/>
	<div id="eg39" class="title">eg39:单选择器在元素开头插入内容(支持html) </div>
	<div>
		<div id="test39">test39,精简jquery~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test39();" />
		<pre><code class="javascript">$('#test39').prepend('hello');</code></pre>
	</div>
	<hr/>
	<div id="eg40" class="title">eg40:多选择器在第i个元素开头插入html内容(支持html) </div>
	<div>
		<div class="test40">test40,精简jquery1~</div>
		<div class="test40">test40,精简jquery2~</div>
		<div class="test40">test40,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test40();" />
		<pre><code class="javascript">$('.test40').eq(0).prepend('&lt;a href="http://www.llqqww.com" target="_blank"&lt;www.llqqww.com&lt;/a&lt;');</code></pre>
	</div>
	<hr/>
	<div id="eg41" class="title">eg41:多选择器在第i个元素开头插入内容(支持html) </div>
	<div>
		<div class="test41">test41,精简jquery1~</div>
		<div class="test41">test41,精简jquery2~</div>
		<div class="test41">test41,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test41();" />
		<pre><code class="javascript">$('.test41').eq(1,2).prepend('hello');</code></pre>
	</div>
	<hr/>
	<div id="eg42" class="title">eg42:多选择器默认在所有元素开头插入内容(支持html) </div>
	<div>
		<div class="test42">test42,精简jquery1~</div>
		<div class="test42">test42,精简jquery2~</div>
		<div class="test42">test42,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="插入内容" onclick="test42();" />
		<pre><code class="javascript">$('.test42').prepend('&lt;a href="http://www.llqqww.com" target="_blank"&lt;www.llqqww.com&lt;/a&lt;');</code></pre>
	</div>
	<hr/>
	<div id="eg43" class="title">eg43:单选择器在添加class </div>
	<div>
		<div id="test43">test43,精简jquery~</div>
		<input type="button" class="btn btn-success" value="添加class" onclick="test43();" />
		<pre><code class="javascript">$('#test43').addClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg44" class="title">eg44:多选择器默认在第i个元素添加class </div>
	<div>
		<div class="test44">test44,精简jquery1~</div>
		<div class="test44">test44,精简jquery2~</div>
		<div class="test44">test44,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="添加class" onclick="test44();" />
		<pre><code class="javascript">$('.test44').eq(0).addClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg45" class="title">eg45:多选择器在多个元素添加class </div>
	<div>
		<div class="test45">test45,精简jquery1~</div>
		<div class="test45">test45,精简jquery2~</div>
		<div class="test45">test45,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="添加class" onclick="test45();" />
		<pre><code class="javascript">$('.test45').eq(1,2).addClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg46" class="title">eg46:多选择器默认在所有元素添加class </div>
	<div>
		<div class="test46">test46,精简jquery1~</div>
		<div class="test46">test46,精简jquery2~</div>
		<div class="test46">test46,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="添加class" onclick="test46();" />
		<pre><code class="javascript">$('.test46').addClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg47" class="title">eg47:单选择器删除class </div>
	<div>
		<div id="test47" class="red">test47,精简jquery~</div>
		<input type="button" class="btn btn-success" value="删除class" onclick="test47();" />
		<pre><code class="javascript">$('#test47').removeClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg48" class="title">eg48:多选择器删除第i个元素class </div>
	<div>
		<div class="red test48 blue">test48,精简jquery1~</div>
		<div class="red test48 blue">test48,精简jquery2~</div>
		<div class="red test48 blue">test48,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除class" onclick="test48();" />
		<pre><code class="javascript">$('.test48').eq(0).removeClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg49" class="title">eg49:多选择器删除多个元素class </div>
	<div>
		<div class="test49 blue red">test49,精简jquery1~</div>
		<div class="test49 blue red">test49,精简jquery2~</div>
		<div class="test49 blue red">test49,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除class" onclick="test49();" />
		<pre><code class="javascript">$('.test49').eq(1,2).removeClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg50" class="title">eg50:多选择器默认所有元素删除class </div>
	<div>
		<div class="test50 red blue">test50,精简jquery1~</div>
		<div class="test50 red blue">test50,精简jquery2~</div>
		<div class="test50 red blue">test50,精简jquery3~</div>
		<input type="button" class="btn btn-success" value="删除class" onclick="test50();" />
		<pre><code class="javascript">$('.test50').removeClass('red');</code></pre>
	</div>
	<hr/>
	<div id="eg98" class="title">eg98:ajax get网络请求</div>
	<div>
		<input type="button" class="btn btn-success" value="get网络请求" onclick="test98();" />
		<pre><code class="javascript">var url='http://www.llqqww.com/open/json/get.php';
$.ajax({
   	method: 'GET',
   	dataType:'json',
   	url:url,
    data:{
    	name:'Leytton'
    },
    success: function (data,xhr) {
       alert(JSON.stringify(data));
    },
    error:function(data,xhr){
        alert(data);
    }
});</code></pre>
	</div>
	<hr/>
	<div id="eg99" class="title">eg99:ajax post网络请求</div>
	<div>
		<input type="button" class="btn btn-success" value="post网络请求" onclick="test99();" />
		<pre><code class="javascript">var url='http://www.llqqww.com/open/json/post.php';
$.ajax({
   	method: 'POST',
   	dataType:'json',
   	url:url,
    data:{
    	name:'Leytton'
    },
    success: function (data,xhr) {
       alert(JSON.stringify(data));
    },
    error:function(data,xhr){
       alert(data);
    }
});</code></pre>
	</div>
	<hr/>
	<div id="eg100" class="title">eg100:get post网络请求</div>
	<div>
		<input type="button" class="btn btn-success" value="post网络请求" onclick="test100();" />
		<pre><code class="javascript">var url='http://www.llqqww.com/open/json/post.php';
	$.post(url,{name: 'Leytton'},function (data, xhr) {
		alert(JSON.stringify(data));
	},'json');
});</code></pre>
	</div>
	<hr/>
</div>
<script>
function test1() {
	//$(),$s()都行，与Jquery冲突时在Jquery之前引入js文件，采用$s()
	$('#test1').text('Hello,I\'m Leytton~');
	alert($('#test1').text());
}

function test2() {
	$('#test2').attr('my_name', '不亦');
	alert($('#test2').attr('my_name'));
}

function test3() {
	$('#test3').html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" />图文超链接</a>');
	alert($('#test3').html());
}

function test4() {
	if ('1' == $('#test4').attr('show')) {
		$('#test4').hide();
		$('#test4').attr('show', '0');
	} else {
		$('#test4').show();
		$('#test4').attr('show', '1');
	}
}

function test5() {
	alert($('#test5').val());
}

function test6() {
	$('#test6').val('Hello,精简jquery~');
}

function test7() {
	$('.test7').eq(0).text('Hi,精简jquery~');
	alert($('.test7').eq(0).text());
}

function test8() {
	$('.test8').eq(1, 2).text('Hi,精简jquery~');
	alert($('.test8').eq(1, 2).text());
}

function test9() {
	$('.test9').text('Hi,精简jquery~');
	var str = '';
	var str_list = $('.test9').text();
	for (var i = 0; i < str_list.length; i++) {
		str += (i + ':' + str_list[i] + '\n');
	}
	alert('length:' + str_list.length + '\n' + str);
}

function test10() {
	$('.test10').eq(0).attr('my_name', '不亦');
	alert($('.test10').eq(0).attr('my_name'));
}

function test11() {
	$('.test11').eq(1, 2).attr('my_name', '不亦');
	alert($('.test11').eq(1, 2).attr('my_name'));
}

function test12() {
	$('.test12').attr('my_name', '不亦');
	var str = '';
	var str_list = $('.test12').attr('my_name');
	for (var i = 0; i < str_list.length; i++) {
		str += (i + ':' + str_list[i] + '\n');
	}
	alert('length:' + str_list.length + '\n' + str);
}

function test13() {
	$('.test13').eq(0).html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" />图文超链接</a>');
	alert($('.test13').eq(0).html());
}

function test14() {
	$('.test14').eq(1, 2).html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" />图文超链接</a>', 1);
	alert($('.test14').eq(1, 2).html());
}

function test15() {
	$('.test15').html('<a href="http://blog.csdn.net/leytton" target="_blank"><img src="img/sa.jpg" />图文超链接</a>');
	var str = '';
	var str_list = $('.test15').html();
	for (var i = 0; i < str_list.length; i++) {
		str += (i + ':' + str_list[i] + '\n');
	}
	alert('length:' + str_list.length + '\n' + str);
}

function test16() {
	if ('0' == $('#eg16').attr('show')) {
		$('.test16').eq(0).show();
		$('#eg16').attr('show', '1');
	} else {
		$('.test16').eq(0).hide();
		$('#eg16').attr('show', '0');
	}
}

function test17() {
	if ('0' == $('#eg17').attr('show')) {
		$('.test17').eq(1, 2).show();
		$('#eg17').attr('show', '1');
	} else {
		$('.test17').eq(1, 2).hide();
		$('#eg17').attr('show', '0');
	}
}

function test18() {
	if ('0' == $('#eg18').attr('show')) {
		$('.test18').show();
		$('#eg18').attr('show', '1');
	} else {
		$('.test18').hide();
		$('#eg18').attr('show', '0');
	}
}

function test19() {
	alert('元素对象:' + $('#test19')[0] + '\n文本:' + $('#test19')[0].innerText);
}

function test20() {
	alert('元素对象:' + $('.test20')[0] + '\n文本:' + $('.test20')[0].innerText);
}

function test21() {
	alert('元素对象:' + $('.test21')[1] + '\n文本:' + $('.test21')[1].innerText);
}

function test22() {
	var str = '';
	for (var i = 0; i < $('.test22').length; i++) {
		str += (i + ':' + $('.test22')[i].innerText + '\n');
	}
	alert('元素对象数组:' + $('.test22') + '\n' + str);
}

function test23() {
	$('.test23').eq(0).val('Hi,精简jquery~');
	alert($('.test23').eq(0).val());
}

function test24() {
	$('.test24').eq(1, 2).val('Hi,精简jquery~');
	alert($('.test24').eq(1, 2).val());
}

function test25() {
	$('.test25').val('Hi,精简jquery~');
	var str = '';
	var str_list = $('.test25').val();
	for (var i = 0; i < str_list.length; i++) {
		str += (i + ':' + str_list[i] + '\n');
	}
	alert('length:' + str_list.length + '\n' + str);
}

function test26() {
	$('#test26').click(function () {
		alert(this.innerText);
	});
}

function test27() {
	$('.test27').eq(0).click(function () {
		alert(this.innerText);
	});
}

function test28() {
	$('.test28').eq(1, 2).click(function () {
		alert(this.innerText);
	}, 1);
}

function test29() {
	$('.test29').click(function () {
		alert(this.innerText);
	});
}

function test30() {
	var str = '';
	var i = 0;
	$('.test30').each(function () {
		str += (i + ':' + this.innerText + '\n');
		i++;
	});
	alert('length:' + i + '\n' + str);
}

function test31() {
	$('#test31').remove();
}

function test32() {
	$('.test32').eq(0).remove();
}

function test33() {
	$('.test33').eq(1, 2).remove();
}

function test34() {
	$('.test34').remove();
}

function test35() {
	$('#test35').append('hello');
}

function test36() {
	$('.test36').eq(0).append('<a href="http://www.llqqww.com" target="_blank">www.llqqww.com</a>');
}

function test37() {
	$('.test37').eq(1, 2).append('hello');
}

function test38() {
	$('.test38').append('<a href="http://www.llqqww.com" target="_blank">www.llqqww.com</a>');
}

function test39() {
	$('#test39').prepend('hello');
}

function test40() {
	$('.test40').eq(0).prepend('<a href="http://www.llqqww.com" target="_blank">www.llqqww.com</a>');
}

function test41() {
	$('.test41').eq(1, 2).prepend('hello');
}

function test42() {
	$('.test42').prepend('<a href="http://www.llqqww.com" target="_blank">www.llqqww.com</a>');
}

function test43() {
	$('#test43').addClass('red');
}

function test44() {
	$('.test44').eq(0).addClass('red');
}

function test45() {
	$('.test45').eq(1, 2).addClass('red');
}

function test46() {
	$('.test46').addClass('red');
}

function test47() {
	$('#test47').removeClass('red');
}

function test48() {
	$('.test48').eq(0).removeClass('red');
}

function test49() {
	$('.test49').eq(1, 2).removeClass('red');
}

function test50() {
	$('.test50').removeClass('red');
}

function test98() {
	var url = 'http://www.llqqww.com/open/json/get.php';
	$.ajax({
		method: 'GET',
		dataType: 'json',
		url: url,
		data: {
			name: 'Leytton'
		},
		success: function (data, xhr) {
			alert(JSON.stringify(data));
		},
		error: function (data, xhr) {
			alert(data);
		}
	});
}

function test99() {
	var url = 'http://www.llqqww.com/open/json/post.php';
	$.ajax({
		method: 'POST',
		dataType: 'json',
		url: url,
		data: {
			name: 'Leytton'
		},
		success: function (data, xhr) {
			alert(JSON.stringify(data));
		},
		error: function (data, xhr) {
			alert(data);
		}
	});
}
function test100() {
	var url = 'http://www.llqqww.com/open/json/post.php';
	$.post(url,{name: 'Leytton'},function (data, xhr) {
		alert(JSON.stringify(data));
	},'json');
}





	test26();
	test27();
	test28();
	test29();
</script>
</body>
</html>